<template id="tmp-creature-list">
    <div>
        <div class="mt-3 text-right">
            <el-form :inline="true" size="mini" class="demo-form-inline">
                <el-form-item label="entry">
                    <el-input v-model="search.entry" placeholder="entry"></el-input>
                </el-form-item>
                <el-form-item label="名称">
                    <el-input v-model="search.name" placeholder="名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search.page=1;getList();">查询</el-button>
                </el-form-item>
            </el-form>


        </div>
        <el-table
            :data="list"
            style="width: 100%">
            <el-table-column
                prop="entry"
                width="80"
                label="entry">
            </el-table-column>
            <el-table-column
                prop="minlevel"
                width="80"
                label="最低等级">
            </el-table-column>
            <el-table-column
                prop="maxlevel"
                width="80"
                label="最高等级">
            </el-table-column>
            <el-table-column
                prop="name_cn"
                label="姓名">
                <template slot-scope="scope">
                    @{{scope.row.name_cn}}
                </template>
            </el-table-column>
            <el-table-column
                label="">
                <template slot-scope="scope">
                    <el-button size="small" @click="curItem=scope.row;showEditor=true;">编辑</el-button>
                </template>
            </el-table-column>
{{--            <el-table-column
                prop="Quality"
                label="Quality">
            </el-table-column>--}}

        </el-table>

        <div class="text-center mt-5" v-if="list">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="search.page"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="search.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="search.total">
            </el-pagination>
        </div>

        <component-item-edit :item="curItem" :visible.sync="showEditor"></component-item-edit>
    </div>
</template>
<script>
    Vue.component("component-creature-list", {
        data() {
            return {
                list:[],
                curItem:null,
                showEditor:false,
                search: {
                    entry:'',
                    name:'',

                    size: 10,
                    page:1,
                    total: 1,
                }
            };
        },
        template:"#tmp-creature-list",
        mounted() {
            // console.log('ddd');
            // this.getList();
        },
        methods: {
            getList(){
                post('creatureList', this.search,res=>{
                    console.log(res);
                    this.list=res.data.data;
                    this.search.total=res.data.total;
                },this)
            },
            handleSizeChange(size){
                this.search.size=size;
                this.getList();
            },
            handleCurrentChange(page){
                this.search.page=page;
                this.getList();
            }
        }
    });
</script>

